import { DownloadOutlined, ExclamationCircleOutlined } from "@ant-design/icons"
import { Button, Flex, Modal, Typography } from "antd"
import { useState } from "react"

import { useLocale } from "@/locales"
import { exportFileFromApiHaveName } from "@/utils/excelUtils/excelExport"

interface IProps {
	buttonProps?: any
	label?: string
	url: string
	params: any
}

export default function ExportButton({ label, buttonProps, params, url }: IProps) {
	const { formatMessage } = useLocale()
	const [loading, setLoading] = useState(false)

	const onExport = () => {
		Modal.confirm({
			title: formatMessage({ id: "member.table_info.confirmation_prompt" }),
			content: (
				<Flex align="center" gap={10}>
					<ExclamationCircleOutlined style={{ color: "#E6A23C" }} />
					<div>
						<Typography style={{ fontWeight: 900 }}>{formatMessage({ id: "member.table_info.question" })}?</Typography>
						<Typography style={{ fontWeight: 300, fontSize: 16, color: "gray" }}>
							{formatMessage({ id: "member.table_info.sub_title" })}?
						</Typography>
					</div>
				</Flex>
			),
			okText: formatMessage({ id: "member.table_info.confirm" }),
			cancelText: formatMessage({ id: "member.table_info.cancel" }),
			onOk: () => {
				setLoading(true)

				exportFileFromApiHaveName(url, params as any).then(() => {
					setLoading(false)
				})
			}
		})
	}

	return (
		<Button
			loading={loading}
			style={{ background: "#E6A23C", color: "#ffffff" }}
			type="default"
			icon={<DownloadOutlined />}
			onClick={onExport}
			{...buttonProps}
		>
			{formatMessage({ id: label ?? "common.export" })}
		</Button>
	)
}
